<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米布局案例</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <ul class="box">
        <li>
            <a href="#"> <img src="imgs/1.webp" alt=""></a>

            <a href="#">
                <h3 class="title">2021年春季新品发布会第一场</h3>
            </a>
        </li>
        <li>
            <a href="#"> <img src="imgs/2.webp" alt=""></a>

            <a href="#">
                <h3 class="title">Redmi 10X系列发布会</h3>
            </a>
        </li>
        <li>
            <a href="#"> <img src="imgs/3.webp" alt=""></a>

            <a href="#">
                <h3 class="title">小米10 青春版 发布会</h3>
            </a>
        </li>
        <li class="last">
            <a href="#"> <img src="imgs/4.webp" alt=""></a>

            <a href="#">
                <h3 class="title">小米10 8K手机拍大片</h3>
            </a>
        </li>
    </ul>
</body>

</html>